<template lang='pug'>
  div.index.h100
    //- input(v-focus='click')
    Button(@click='add') add
    ul(v-maopao='true')
      li(v-for='item in data' @click.stop='add') {{item}}
        div(style='background-color:#fff' @click.stop='add') 111
    selects
    detail(ref='detail' @on-close='closeHandler')
</template>
<script>
import detail from './modal'
import selects from './select'
export default {
  components: {
    selects,
    detail
  },
  data () {
    return {
      data: [1, 2, 3, 4, 5]
    }
  },
  directives: {
    focus: {
      update (el, binding) {
        if (binding.value) {
          alert('外层点击')
          el.focus()
        }
      }
    }
  },
  methods: {
    add () {
      this.$refs.detail.show()
    },
    closeHandler () {
    }
  }
}
</script>

<style lang='less' scoped>
.index {
  background-color: #ccc;
  ul {
    list-style: none;
    li {
      line-height: 20px;
      width: 100px;
      margin-bottom: 2px;
      background-color: #aaa;
      cursor: pointer;
    }
  }
}
</style>
